<template>
  <div class="withdrawal-failed-wrapper">
    <div class="header pt-11 h-60">
      <v-img class="h-5" src="/src/icons/logo.svg"></v-img>
    </div>
    <div class="content flex justify-center">
      <v-card class="bg-white pb-40 w-full !shadow-none" max-width="1726px">
        <p class="title text-4xl pb-6 pt-12">提现失败</p>
        <div class="icon-wrap pt-6 pb-6">
          <v-img class="w-10" src="/src/icons/withdrawalFailed/alert-circle-outline.svg"></v-img>
        </div>
        <div class="btns-wrap pl-10 pr-10">
          <p class="tips pb-6">GAS费不足，请确保钱包里有额外的0.0015 BNB作为GAS费，否则提款会失败。</p>
          <v-row>
            <v-col cols="12" sm="6">
              <v-btn class="w-full !h-16 text-lg border-[#8CD9FF]" color="#736B7D" variant="outlined">
                <v-img
                  class="w-8 pr-2"
                  src="/src/icons/withdrawalFailed/GB.svg"
                ></v-img>
                Solution
              </v-btn>
            </v-col>
            <v-col cols="12" sm="6">
              <v-btn
                class="w-full !h-16 text-lg border-[#8CD9FF]"
                color="#736B7D"
                variant="outlined"
              >
                <v-img
                  class="w-8 pr-2"
                  src="/src/icons/withdrawalFailed/Discord.svg"
                ></v-img>
                How to buy
              </v-btn>
            </v-col>
          </v-row>
          <p class="text pt-8 pb-5">加入社区</p>
          <v-row>
            <v-col cols="12" sm="6">
            <v-btn class="w-full !h-16 text-lg border-[#8CD9FF]" color="#736B7D" variant="outlined">
              <v-img
                class="w-8 pr-2"
                src="/src/icons/course/Discord2.svg"
              ></v-img>
              oisao
            </v-btn>
            </v-col>
            <v-col cols="12" sm="6">
            <v-btn
              class="w-full !h-16 text-lg border-[#8CD9FF]"
              color="#736B7D"
              variant="outlined"
            >
              <v-img
                class="w-8 pr-2"
                src="/src/icons/course/Telegram2.svg"
              ></v-img>
              ausiou
            </v-btn>
            </v-col>
            </v-row>
        </div>
      </v-card>
    </div>
    <div class="footer bg-white flex justify-center pt-5 pb-5">
      <p class="text-[#7A7893]">© 2022 SharkDAO Copy</p>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.header {
  background-color: #cddff7;
}
.content {
  .v-card {
    margin-top: -9.25rem;
    .title {
      text-align: center;
      font-weight: 600;
      color: #736b7d;
    }
    .icon-wrap{
      .v-img{
        margin: 0 auto;
      }
    }
    .tips{
      text-align: center;
    }
    .v-btn {
      box-shadow: 0px 0.5rem 0px #e6e6e6 !important;
    }
    .btns-wrap {
      max-width: 580px;
      margin: 0 auto;
    }
  }
}
</style>